<template>
  <div class="screen-left">

    <div class="left-menu">
      <div class="left-menu-item"
           v-for="(item,index) in items"
           :key="item.value"
           :class="{actived: currMenu === item.value}" @click="onClick(item)">{{item.label}}</div>

    </div>

    <transition name="slide">
      <div v-show="visible" class="screen-left-panel">
        <jjyx v-if="currMenu === 1"/>
        <fczt v-else-if="currMenu === 2"/>
        <gcjs v-else-if="currMenu === 3"/>
      </div>
    </transition>

  </div>
</template>

<script>
import jjyx from './jjyx'
import fczt from './fczt'
import gcjs from './gcjs'

export default {
  name: 'screen-left',
  components: {
    jjyx,
    fczt,
    gcjs
  },
  data() {
    return {
      visible: false,
      currMenu: '',
      items: [
        {label: '经济运行', value: 1},
        {label: '房产专题', value: 2},
        {label: '工程建设', value: 3},
        {label: '既有房屋', value: 4},
        {label: '防汛处置', value: 5}
      ]
    }
  },
  methods: {
    onClick(item) {
      if(this.currMenu === item.value) {
        this.visible = !this.visible
        this.currMenu = ''
        return
      }
      this.currMenu = item.value
      this.visible = true
    }
  },
  mounted() {
  }
}
</script>

<style lang="scss" scoped>
.screen-left {
  position: absolute;
  top: 13%;
  bottom: 4%;
  left: 8px;
  z-index: 2;

  .left-menu {
    height: 100%;
    overflow-y: auto;
    /*background-color: #0B2647;*/
    position: relative;
    z-index: 2;

    &-item {
      width: 46px;
      height: 145px;
      text-shadow: -1px 2px 2px rgb(3 22 52 / 65%);
      word-wrap: break-word;
      background-image: url("~@/assets/screen/left-menu.svg");
      background-size: 100% 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      writing-mode: vertical-lr;
      font-size: 18px;
      letter-spacing: 2px;
      cursor: pointer;

      &:hover, &.actived {
        color: #96fff2;
        background-image: url("~@/assets/screen/left-menu-hover.svg");
        background-size: 46px 145px;
      }
    }
  }

  &-panel {
    position: absolute;
    z-index: 1;
    height: 100%;
    top: 0;
    width: 450px;
    left: 46px;
  }
}

/* 进入和离开的动画 */
.slide-enter-active, .slide-leave-active {
  transition: all .3s cubic-bezier(0.7,0,0.3,1);
}

.slide-enter, .slide-leave-to {
  transform: translateX(-100%);
  opacity: 0;
}

</style>
